﻿@using CarCareTracker.Helper
@inject IConfigHelper config
@inject ITranslationHelper translator
@{
    var userConfig = config.GetUserConfig(User);
    var userLanguage = userConfig.UserLanguage;
}
@model ReportViewModel
<script>
    var availableMetrics = [];
    @foreach (ImportMode importMode in Model.AvailableMetrics)
    {
            @:availableMetrics.push('@importMode');
    }
</script>
<div class="container reportTabContainer">
    <div class="row hideOnPrint" id="reportHeaderContent">
        @await Html.PartialAsync("_ReportHeader", Model.ReportHeaderForVehicle)
    </div>
    <hr />
    <div class="row hideOnPrint">
        <div class="col-md-3 col-12 mt-2">
            <div class="row">
                <div class="col-12">
                    <select class="form-select" id="yearOption" onchange="yearUpdated()">
                        <option value="0">@translator.Translate(userLanguage, "All Time")</option>
                        @foreach (int year in Model.Years)
                        {
                            <option value="@year">@year</option>
                        }
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="costMakeUpReportContent">
                    @await Html.PartialAsync("_CostMakeUpReport", Model.CostMakeUpForVehicle)
                </div>
            </div>
        </div>
        <div class="col-md-6 col-12 mt-2">
            <div class="row">
                <div class="col-md-1 d-sm-none d-md-block"></div>
                <div class="col-12 col-md-10">
                    <div class="dropdown d-grid dropdown-center">
                        <button class="btn btn-outline-warning dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="outside" aria-expanded="false" @(Model.AvailableMetrics.Any() ? "" : "disabled")>
                            @translator.Translate(userLanguage, "Metrics")
                        </button>
                        <ul class="dropdown-menu" style="width:100%;">
                            <li class="dropdown-item">
                                <div class="list-group-item">
                                    <input class="form-check-input" onChange="updateCheckAll()" type="checkbox" id="selectAllExpenseCheck" value="0" checked>
                                    <label class="form-check-label stretched-link" for="selectAllExpenseCheck">@translator.Translate(userLanguage, "Select All")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.OdometerRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="odometerExpenseCheck" value="6" checked>
                                    <label class="form-check-label stretched-link" for="odometerExpenseCheck">@translator.Translate(userLanguage, "Odometer")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.ServiceRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="serviceExpenseCheck" value="1" checked>
                                    <label class="form-check-label stretched-link" for="serviceExpenseCheck">@translator.Translate(userLanguage, "Service")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.RepairRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="repairExpenseCheck" value="2" checked>
                                    <label class="form-check-label stretched-link" for="repairExpenseCheck">@translator.Translate(userLanguage, "Repairs")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.UpgradeRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="upgradeExpenseCheck" value="3" checked>
                                    <label class="form-check-label stretched-link" for="upgradeExpenseCheck">@translator.Translate(userLanguage, "Upgrades")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.GasRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="gasExpenseCheck" value="4" checked>
                                    <label class="form-check-label stretched-link" for="gasExpenseCheck">@translator.Translate(userLanguage, "Fuel")</label>
                                </div>
                            </li>
                            <li class="dropdown-item @(Model.AvailableMetrics.Contains(ImportMode.TaxRecord) ? "" : "d-none")">
                                <div class="list-group-item">
                                    <input class="form-check-input reportCheckBox" onChange="updateCheck()" type="checkbox" id="taxExpenseCheck" value="5" checked>
                                    <label class="form-check-label stretched-link" for="taxExpenseCheck">@translator.Translate(userLanguage, "Taxes")</label>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="col-md-1 d-sm-none d-md-block"></div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="gasCostByMonthReportContent">
                    @await Html.PartialAsync("_GasCostByMonthReport", Model.CostForVehicleByMonth)
                </div>
            </div>
        </div>
        <div class="col-md-3 col-12 mt-2">
            <div class="row">
                <div class="col-12">
                    <select class="form-select" onchange="updateReminderPie()" id="reminderOption">
                        <option value="0">@translator.Translate(userLanguage, "As of Today")</option>
                        <option value="30">@translator.Translate(userLanguage, "+30 Days")</option>
                        <option value="60">@translator.Translate(userLanguage, "+60 Days")</option>
                        <option value="90">@translator.Translate(userLanguage, "+90 Days")</option>
                    </select>
                </div>
            </div>
            <div class="row">
                <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="reminderMakeUpReportContent">
                    @await Html.PartialAsync("_ReminderMakeUpReport", Model.ReminderMakeUpForVehicle)
                </div>
            </div>
        </div>
    </div>
    <hr />
    <div class="row hideOnPrint">
        <div class="col-md-3 col-12 chartContainer" id="collaboratorContent">
            @await Html.PartialAsync("_Collaborators", Model.Collaborators)
        </div>
        <div class="col-md-6 col-12 chartContainer">
            <div class="d-flex justify-content-center align-items-center col-12 chartContainer" id="monthFuelMileageReportContent">
                @await Html.PartialAsync("_MPGByMonthReport", Model.FuelMileageForVehicleByMonth)
            </div>
        </div>
        <div class="col-md-3 col-12 chartContainer">
            <div class="d-grid">
                <button onclick="showGlobalSearch()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Search")<i class="bi ms-2 bi-search"></i></button>
            </div>
            <div class="d-grid">
                <button onclick="generateVehicleHistoryReport()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Vehicle Maintenance Report")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
            </div>
            <div class="d-grid">
                <button onclick="exportAttachments()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Export Attachments")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
            </div>
            @if (Model.HasVehicleImageMap)
            {
                <div class="d-grid">
                    <button onclick="loadVehicleImageMap()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Vehicle Map")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
                </div>
            }
            @if (Model.CustomWidgetsConfigured)
            {
                <div class="d-grid">
                    <button onclick="showCustomWidgets()" class="btn btn-secondary btn-md mt-1 mb-1">@translator.Translate(userLanguage, "Additional Widgets")<i class="bi ms-2 bi-box-arrow-in-up-right"></i></button>
                </div>
            }
        </div>
    </div>
</div>
<div class="modal fade" data-bs-focus="false" id="vehicleDataTableModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content" id="vehicleDataTableModalContent">
            
        </div>
    </div>
</div>
@if (Model.CustomWidgetsConfigured)
{
    <div class="modal fade" data-bs-focus="false" id="vehicleCustomWidgetsModal" tabindex="-1" role="dialog" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content" id="vehicleCustomWidgetsModalContent">
            </div>
        </div>
    </div>
    <script>loadCustomWidgets()</script>
}

<script>
    getSelectedMetrics();
</script>